<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { fromData3 } from "@/api/index.js";
const options = ref([
  {
    text: "近一个月",
    value: "month"
  },
  {
    text: "近一周",
    value: "week"
  },
  {
    text: "近24小时",
    value: "hour"
  }
]);

const activeTag = ref("week");

const changeTag = e => {
  activeTag.value = e;
  getData();
};

const getData = () => {
  let chartDom = document.querySelector(".echarts");
  let myChart = echarts.init(chartDom);


  let option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar"
      }
    ]
  };

  fromData3(activeTag.value)
    .then(res => {
      option.xAxis.data = res.x;

      option.series[0].data = res.y;

      myChart.setOption(option);
    })
    .catch(err => {});
};

onMounted(() => {
  getData();
});
</script>


<template>
  <el-card shadow="hover" :body-style="{ padding: '20px' }">
    <template #header>
      <div class="flex justify-between">
        <span>订单统计</span>

        <div>
          <el-check-tag
            :checked="activeTag === item.value"
            v-for="item in options"
            :key="item.value"
            class="ml-2 mr-2"
            @click="changeTag(item.value)"
          >{{ item.text }}</el-check-tag>
        </div>
      </div>
    </template>
    <div class="echarts"></div>
    <!-- card body -->
  </el-card>
</template>

<style scoped>
.echarts {
  widows: 100%;
  height: 300px;
  margin: 0 auto;
}
</style>